import React, { useState } from 'react';
import './App.css';
import HomePage from './pages/homePage/homePage';
import OpenPage from './pages/openPage/openPage';
import PackPage from './pages/packLuggagePage/packPage';
import TextPage from './pages/textPage/textPage';
import RankingPage from './pages/rankingPage/rankingPage';

function App() {
  const [currentPage, setCurrentPage] = useState('home');

  const handleNextPage = () => {
    setCurrentPage('open');
  };

  const handleGoToOpenPage = () => {
    setCurrentPage('open');
  };

  const handleGoToPackPage = () => {
    setCurrentPage('pack');
  };

  const handleGoToTextPage = () => {
    setCurrentPage('text');
  };

  const handleBackToPackPage = () => {
    setCurrentPage('pack');
  };

  const handleGoToRankPage = () => {
    setCurrentPage('rank');
  };

  const handleBackToTextPage = () => {
    setCurrentPage('text');
  };

  return (
    <div className="App">
      {currentPage === 'home' && <HomePage onNextPage={handleGoToPackPage} onGoToTextPage={handleGoToTextPage} />}
        {currentPage === 'open' && <OpenPage onGoToPackPage={handleGoToPackPage} />}
        {currentPage === 'pack' && <PackPage onGoToTextPage={handleGoToTextPage} />}
        {currentPage === 'text' && <TextPage onBack={handleBackToPackPage} onGoToRankPage={handleGoToRankPage} />}
        {currentPage === 'rank' && <RankingPage onBack={handleBackToTextPage} />}
    </div>
  );
}

export default App;
